<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="试题库">
        <div class="timeFreq">
          <!-- 考试筛选 -->
          <el-form :inline="true" :model="formInline" class="userDo-search">
            <el-form-item label="考试期次:">
              <el-input size="small"  placeholder="请输入" v-model="formInline.examAdministration.examPeriod"></el-input>
            </el-form-item>
            <el-form-item label="考试名称:">
              <el-input size="small"  placeholder="请输入" v-model="formInline.examAdministration.examName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary"  @click="search()">查询</el-button>
              <el-button size="small" type="primary"  @click="handleEdit1()">重置</el-button>
            </el-form-item>
          </el-form>


<!--          <examcard-->
<!--            v-for="item in timeFreq"-->
<!--            :key="item.id"-->
<!--            :examContent="item"-->
<!--            v-show="!showShade"-->
<!--          ></examcard>-->
<!--          <paper v-show="showShade"></paper>-->
        </div>

        <div>
        <el-button type="primary" @click="addRoutes1">新增考试</el-button>
        </div>

        <div>
          <!--列表-->
          <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
            <el-table-column align="center" type="selection" width="60">
            </el-table-column>
            <el-table-column sortable prop="id" label="序号" width="50">
            </el-table-column>
            <el-table-column sortable prop="examPeriod" label="考试期次" width="200">
            </el-table-column>
            <el-table-column sortable prop="examName" label="考试名称" width="150">
            </el-table-column>
            <el-table-column sortable prop="examQuizTime" label="考试时间" width="150">
            </el-table-column>
            <el-table-column sortable prop="examPersonNum" label="考生人数" width="50">
            </el-table-column>
            <el-table-column sortable prop="approvalTag" label="审批状态" width="80">
              <template slot-scope="scope">

                <el-tag type="success" v-if="scope.row.approvalTag == 1">
                  <div>{{scope.row.approvalTag == '1'?'已通过':'未通过'}}</div>
                </el-tag>
                <el-tag type="danger" v-else>
                  <div>{{scope.row.approvalTag == '1'?'已通过':'未通过'}}</div>
                </el-tag>
              </template>

              <!-- <template slot-scope="scope">
                <div>{{scope.row.editTime|timestampToTime}}</div>
              </template> -->
            </el-table-column>

            <el-table-column sortable prop="examExamine" label="开考状态" width="80">
              <template slot-scope="scope">
<!--                <el-tag type="success">-->
<!--                  <div>{{scope.row.examExamine == '2'?'已开始':'未开始'}}</div>-->
<!--                </el-tag>-->

                <el-tag type="success" v-if="scope.row.examExamine == 1">
                  <div>{{scope.row.examExamine == '1'?'已开始':'未开始'}}</div>
                </el-tag>
                <el-tag type="danger" v-else>
                  <div>{{scope.row.examExamine == '1'?'已开始':'未开始'}}</div>
                </el-tag>
              </template>

              <!-- <template slot-scope="scope">
                <div>{{scope.row.editTime|timestampToTime}}</div>
              </template> -->
            </el-table-column>

            <el-table-column align="center" label="操作" min-width="300" width="250">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
                <el-button size="mini" @click="handle(scope.$index, scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
<!--        <div>-->
          <!-- 分页组件 -->
<!--          <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>-->
<!--        </div>-->
        <div>
          <!-- 编辑界面 -->
          <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click='closeDialog("edit")'>
            <el-form label-width="80px" ref="editForm" :model="editForm" >
              <el-form-item label="考试期次" prop="examPeriod">
                <el-input size="small" v-model="editForm.examPeriod" auto-complete="off" placeholder="请输入考试期次"></el-input>
              </el-form-item>
              <el-form-item label="考试名称" prop="examName">
                <el-input size="small" v-model="editForm.examName" auto-complete="off" placeholder="请输入姓名"></el-input>
              </el-form-item>
<!--              <el-form-item label="考试时间" prop="roleId">-->
<!--                <el-select size="small" v-model="editForm.roleId" placeholder="请选择" class="userRole">-->
<!--                  <el-option label="考生人数" value="1"></el-option>-->
<!--                  <el-option label="审批状态" value="2"></el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
              <el-form-item label="考试时间" prop="examQuizTime">
                <el-input size="small" v-model="editForm.examQuizTime" auto-complete="off" placeholder="请输入考试时间"></el-input>
              </el-form-item>
              <el-form-item label="考生人数" prop="examPersonNum">
                <el-input size="small" v-model="editForm.examPersonNum" auto-complete="off" placeholder="请输入考生人数"></el-input>
              </el-form-item>
              <el-form-item label="审批状态" prop="approvalTag">
                <el-switch
                    style="display: block;margin-top:9px"
                    v-model="editForm.approvalTag"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-text="可用"
                    inactive-text="禁用"
                    active-value="1"
                    inactive-value="2">

                </el-switch>
<!--                <el-input size="small" v-model="editForm.approvalTag" placeholder="请输入手机号"></el-input>-->
              </el-form-item>

              <el-form-item label="开考状态" prop="examExamine">
                <el-switch
                    style="display: block;margin-top:9px"
                    v-model="editForm.examExamine"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-text="可用"
                    inactive-text="禁用"
                    active-value="1"
                    inactive-value="2">

                </el-switch>
<!--                <el-input size="small" v-model="editForm.examExamine" placeholder="请输入手机号"></el-input>-->
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button size="small" @click='closeDialog("edit")'>取消</el-button>
              <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
            </div>
          </el-dialog>
        </div>
        <div>
          <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                v-bind:child-msg="pageparm"
                @current-change="handleCurrentChange"
                :current-page="pageparm.currentPage"
                :page-sizes="[1, 3, 5, 8,15]"
                :page-size="pageparm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageparm.total" style="margin-left:200px;margin-top:16px">
            </el-pagination>
          </div>
        </div>

      </el-tab-pane>

    </el-tabs>
  </div>

</template>

<script>
import examcard from "@c/examCard";
import paper from "@c/paper";
import qs from "qs";

export default {

  methods: {

    getdata() {
      // this.loading = true

      this.$axios.post('http://localhost:8080/examAdministration/selectPage', this.formInline
      ).then(
          res => {
            console.log("Exam对象后端数据》查询", res)
            console.log("Exam对象后端数据", res.data.data)
            this.listData = res.data.data.list
            this.pageparm.total = res.data.data.total

            this.pageparm.currentPage = res.data.data.pageNum;
            this.pageparm.pageSize = res.data.data.pageSize
            //初始化分页组件显示的总页数
            console.log("Exam对象后端数据》查询", res)
            console.log("Exam对象后端数据", res.data.data.total)
            this.handleCurrentChange.total = res.data.data.total

          })
    },
    // 新增考试按钮用
    addRoutes1 () {
      this.$router.push('/exam/message')
    },

    //详情页面用
    handle(index,row) {
      console.log("row",row)
      this.$router.push({path: '/exam/explain', query: {id: row.id}})
    },

    //分页用
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.formInline.limit =val
      this.formInline.page = 1
      this.getdata(this.formInline)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.formInline.page = val
      this.getdata(this.formInline)
    }
  },

  name: "index",
  components: {
    examcard,
    paper,
  },
  data() {

    return {



      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      title: '添加用户',
      editFormVisible: false, //控制编辑页面显示与隐藏
      dataAccessshow: false, //控制数据权限显示与隐藏
      unitAccessshow: false, //控制所属单位隐藏与显示


      formInline: {
        page: 1,
        limit: 5,
        examAdministration:{
          examPeriod: '',
          examName: '',
          // examQuizTime: '',
          // examPersonNum: '',
          // approvalTag: '',
          // examExamine: '',
        },

        // token: localStorage.getItem('logintoken')
      },

      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 5,
        total: 20,
      },

      //显示编辑界面
      handleEdit(index, row) {
        console.log("row",row)
        console.log("index",index)
        // console.log("listData",listData)
        this.editFormVisible = true

        this.title = '修改'
        this.editForm.id = row.id;
        this.editForm.examPeriod = row.examPeriod;
        this.editForm.examName = row.examName
        this.editForm.examQuizTime = row.examQuizTime
        this.editForm.examPersonNum = row.examPersonNum
        this.editForm.approvalTag = row.approvalTag
        this.editForm.examExamine = row.examExamine
      },

      // 编辑、增加页面保存方法
      submitForm(editData) {
        console.log("id",this.editForm)

              //编辑保存方法

              this.$axios.post('http://localhost:8080/examAdministration/updateOne', this.editForm)
                  .then(res => {
                    this.editFormVisible = false
                    this.loading = false
                      console.log("res编辑",res)
                    if (res.data.message == "修改成功") {
                      //刷新页面
                      this.getdata(this.formInline)

                      this.$message({
                        type: '修改成功',
                        message: '试卷修改成功！'
                      })
                    } else {
                      this.$message({
                        type: '修改失败',
                        message: "试卷修改失败！"
                      })
                    }
                  })
                  .catch(err => {
                    this.editFormVisible = false
                    this.loading = false
                    this.$message.error('试卷信息修改失败，请稍后再试！')
                  })
      },

      // search() {
      //   this.$axios.post('/api/examAdministration/selectList'
      //   ).then(
      //       res => {
      //         console.log("Exam对象后端数据", res)
      //         this.listData = res.data.data
      //
      //
      //         //初始化分页组件显示的总页数
      //         console.log("Exam对象后端数据》查询", res)
      //         // this.handleCurrentChange.total = res.data.total
      //       })
      // },


      //删除
      deleteUser(index, row) {
        this.$confirm('确定要删除吗?', '信息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
            .then(() => {
              console.log(index,row);
              //把它改成axios请求
              // deptDelete(row.deptId)
              this.$axios.post('/api/examAdministration/deleteOne/'+row.id)
                  .then(res => {
                    console.log("Exam对象后端数据《删除", res)

                    if (res.data.message == "删除成功") {
                      this.$message({
                        type: '删除成功',
                        message: '试卷已删除!'
                      })
                      //删除成功后从新加载页面
                      this.getdata(this.formInline)
                    } else {
                      this.$message({
                        type: '删除失败',
                        message: res.msg
                      })
                    }
                  })
                  // .catch(err => {
                  //   this.loading = false
                  //   this.$message.error('试卷信息删除失败，请稍后再试！')
                  // })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
      },

      // 关闭编辑、增加弹出框
      closeDialog() {
        this.editFormVisible = false
      },

      //排序用
      radio: '1',
      radio1: '3',

      // 编辑与详情
      editForm: {
        id: '',
        examPeriod: '',
        examName: '',
        examQuizTime: '',
        examPersonNum: '',
        approvalTag: '',
        examExamine: '',
        // token: localStorage.getItem('logintoken')
      },

      //基本信息用
      listData1: [{
        a:'aaa',
        b:'bbb'
      }],

      //试卷信息用
      listData2: [{

      }],

      listData: [


      ],

      // timeFreq: [
      //   { title: "章节1", time: "2020年5月23日16:33:56", dura: "60min" },
      //   { title: "章节2", time: "2020年5月23日16:33:56", dura: "60min" },
      //   { title: "章节3", time: "2020年5月23日16:33:56", dura: "60min" },
      //   { title: "章节4", time: "2020年5月23日16:33:56", dura: "60min" },
      //   { title: "章节5", time: "2020年5月23日16:33:56", dura: "60min" },
      // ],
      dutyRule: [
        { title: "章节331", time: "2020年5月23日16:33:56", dura: "60min" },
        { title: "章节212", time: "2020年5月23日16:33:56", dura: "60min" },
        { title: "章节3", time: "2020年5月23日16:33:56", dura: "60min" },
      ],
      falutHand: [
        { title: "章节1", time: "2020年5月23日16:33:56", dura: "60min" },
        { title: "章节25", time: "2020年5月23日16:33:56", dura: "60min" },
        { title: "章节3", time: "2020年5月23日16:33:56", dura: "60min" },
      ],

      // // 分页插件事件
      // callFather(parm) {
      //   console.log('parm',parm);
      //   this.formInline.page = parm.currentPage
      //   this.formInline.limit = parm.pageSize
      //
      //   this.pageparm.page = parm.currentPage;
      //   this.pageparm.limit = parm.pageSize;
      //   this.getdata()
      // },

      // 导入事件
      search() {
        console.log('formInline',this.formInline);
        console.log('this.pageparm',this.pageparm);
        this.formInline.page = this.pageparm.currentPage;
        this.formInline.limit = this.pageparm.pageSize;
        this.getdata()
      },

      //重置事件
      handleEdit1() {
        this.$router.go(0)
      },

      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4

    };
  },

  created() {
    let name = this.$route.query.name
    console.log(name)

    this.getdata();
  },

  computed: {
    showShade() {
      return this.$store.state.settings.onShade;
    },

  },
};
</script>

<style scoped lang="scss">
.timeFreq {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.dutyRule {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.falutHand {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>
